<template>
  <a-spin class="poi-list" tip="加载中..." :spinning="isLoading">
    <!-- 筛选 -->
    <div class="filter">
      <div class="l" style="display:flex;flex-wrap: wrap;">
        <div>
          <span>主播：</span>
          <a-input-search style="width:240px;margin-right:10px" type="text" placeholder="输入主播姓名/手机号" allowClear v-model="search.agentInfo" @search="handleByQueryCond" />
        </div>
        <div>
          <span>状态：</span>
          <a-select style="width:160px;margin-right:10px;" placeholder="请选择状态" v-model="search.status" @change="handleByQueryCond">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">待审核</a-select-option>
            <a-select-option value="1">已通过</a-select-option>
            <a-select-option value="2">已驳回</a-select-option>
          </a-select>
        </div>
        <div>
          <span>申请时间：</span>
          <a-range-picker style="margin-right:15px;" @change="handleByQueryCond" v-model="search.selectDate" />
        </div>
      </div>

      <div class="r" style="width:200px;">
        <a-button type="primary" @click="handleByQueryCond" style="background:#1d6fe9">查询</a-button>
        <a-button type="primary" @click="addBinding" style="background:#34C025;border-color:#34C025;">+ 新增主播</a-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="main-body">
      <a-table :columns="tableColumns" :pagination="false" :data-source="productList" :scroll="{ x: 900, y: tableHeight }" rowKey="id">
        <template slot="status" slot-scope="text, record">
          <span :class="[record.status === 2 ? 'color-f55' : null]">
            {{ record.statusStr || '--' }}
            <a-tooltip v-if="record.status === 2">
              <template slot="title">
                {{ record.rejectReson }}
              </template>
              <a-icon type="info-circle" class="color-f55" />
            </a-tooltip>
          </span>
        </template>
        <template slot="action" slot-scope="text, record">
          <!-- 已通过 -->
          <a-button v-if="record.status === 1 && record.agentId" type="link" @click="toViedoList(record.agentId)">视频列表</a-button>
          <a-button v-if="record.status === 1 && record.agentId" type="link" @click="cooperationSetFn(record)">合作设置</a-button>
          <p v-else>无</p>
          <!-- 待审核 -->
          <!-- <a-button v-if="record.status === 0" type="link" @click="detailInfo(record.id)">详情</a-button> -->
        </template>
      </a-table>
    </div>

    <!-- 分页 -->
    <div class="paging-container">
      <a-pagination
        :pageSize="pagination.pageSize"
        v-model="pagination.pageIndex"
        :total="pagination.total"
        showQuickJumper
        showLessItems
        :showTotal="(total) => `共 ${total} 条`"
        style="margin: 10px auto;text-align:right;"
        @change="handlePageChange"
      />
    </div>
    <!-- 新增主播绑定 -->
    <a-modal class="copy-modal" width="600px" :footer="null" :visible="addBindingShow" @cancel="cancelSubmitAddHost()" title="新增主播">
      <a-spin tip="提交中..." :spinning="isBindHostLoading">
        <a-form-model ref="addBindingModalForm" :model="addBindingModalForm" :rules="addHostRules" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="手机号" prop="phoneNumber">
                <a-input-search v-model="addBindingModalForm.phoneNumber" enter-button placeheloder="请输入抖音注册手机号" @search="onSearchAgent"></a-input-search
              ></a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="姓名" prop="name">
                <a-input v-if="getAgentInfo.name" v-model="getAgentInfo.name" disabled></a-input>
                <a-input v-else v-model="addBindingModalForm.name" placeheloder="请输入主播平台昵称，如：在抖音平台的账号昵称"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="主播UID" prop="dyUid"> <a-input v-model="addBindingModalForm.dyUid" placeheloder="请输入主播在抖音平台的UID"></a-input></a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="主播身份证号" prop="idCard">
                <a-input v-if="getAgentInfo.idCard" v-model="getAgentInfo.idCard" disabled></a-input>
                <a-input v-else v-model="addBindingModalForm.idCard" placeheloder="请输入主播身份证号"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <!-- <a-row>
            <a-col :span="24">
              <a-form-model-item label="主播银行卡号" prop="cardNumber">
                <a-input v-if="getAgentInfo.cardNumber" v-model="getAgentInfo.cardNumber" disabled></a-input>
                <a-input v-else v-model="addBindingModalForm.cardNumber" placeheloder="请输入主播银行卡号"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="开户人姓名" prop="accountName">
                <a-input v-if="getAgentInfo.accountName" v-model="getAgentInfo.accountName" disabled></a-input>
                <a-input v-else v-model="addBindingModalForm.accountName" placeheloder="请输入银行卡号开户人姓名"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row> -->
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="当前在播平台" prop="platform">
                <a-select v-if="getAgentInfo.platform" v-model="getAgentInfo.platform" class="filter-select" disabled>
                  <a-select-option v-for="item in platformList" :key="item.id" :value="item">{{ item }}</a-select-option>
                </a-select>
                <a-select v-else v-model="addBindingModalForm.platform" class="filter-select" placeholder="请选择当前在播平台">
                  <a-select-option v-for="item in platformList" :key="item.id" :value="item">{{ item }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row style="margin-bottom:5px;">
            <a-col :span="24">
              <a-form-model-item label="抖音号" prop="dyNo"> <a-input v-model="addBindingModalForm.dyNo" placeheloder="请输入抖音号"></a-input></a-form-model-item>
            </a-col>
          </a-row>
          <a-row style="position: relative;top: -10px;">
            <a-col :span="24">
              <a-form-model-item label="备注">
                <a-input v-if="getAgentInfo.remark" v-model="getAgentInfo.remark" disabled type="textarea"></a-input>
                <a-input v-else v-model="addBindingModalForm.remark" type="textarea" :maxLength="50"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <!-- <a-row>
            <a-col :span="24">
              <a-form-model-item label="主播身份证照" prop="idCardFrontUrl">
                <div class="id-card-box">
                  <div class="id-card-box-item">
                    <upload v-if="getAgentInfo.idCardFrontUrl.length > 0" disabled :limit="1" :value="getAgentInfo.idCardFrontUrl"></upload>
                    <upload v-else :limit="1" v-model="addBindingModalForm.idCardFrontUrl"></upload>
                    <p>身份证正面</p>
                  </div>
                  <div class="id-card-box-item">
                    <upload v-if="getAgentInfo.idCardBackUrl.length > 0" disabled :limit="1" :value="getAgentInfo.idCardBackUrl"></upload>
                    <upload v-else :limit="1" v-model="addBindingModalForm.idCardBackUrl"></upload>
                    <p>身份证反面</p>
                  </div>
                </div>
              </a-form-model-item>
            </a-col>
          </a-row> -->
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="截图">
                <upload v-if="getAgentInfo.picUrl.length > 0" disabled :limit="9" :value="addBindingModalForm.picUrl"></upload>
                <upload v-else :limit="9" v-model="addBindingModalForm.picUrl"></upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <div style="display:flex;justify-content: center;">
          <a-button type="" @click="cancelSubmitAddHost()" style="margin-right:20px;">取消</a-button>
          <a-button type="primary" @click="submitAddHost()" style="margin-right:20px;">提交审核</a-button>
        </div>
      </a-spin>
    </a-modal>
    <!-- 合作设置 -->
    <a-modal class="copy-modal" width="680px" :footer="null" :visible="cooperationSetModal" @cancel="cooperationSetModal = false" title="合作设置">
      <a-spin tip="提交中..." :spinning="isSubCoopLoading">
        <div class="apply-type">
          <Title :conf="{ title: '合作信息', src: require('@/assets/images/icon_hzsz_hzxx@3x.png') }" class="margin-bott-10" :fontSize="16" :imgWidth="22" :imgHieght="22" />
          <div class="apply-type-box">
            <a-form-model ref="cooperationSetModalForm" :model="cooperationSetModalForm" :rules="coopRules" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
              <a-row>
                <a-col :span="12">
                  <a-form-model-item label="结算类型：" prop="settlementType">
                    <a-select v-model="cooperationSetModalForm.settlementType" class="filter-select" @change="changeCashTypeCoop" placeholder="请选择结算类型">
                      <a-select-option value="1">A</a-select-option>
                      <a-select-option value="2">B</a-select-option>
                      <a-select-option value="3">C</a-select-option>
                      <a-select-option value="4">D</a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12" v-show="showMoneyCoop">
                  <a-form-model-item :label="moneyLabelCoop" prop="money"> <a-input v-model="cooperationSetModalForm.money"></a-input></a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-model-item prop="cooperateStartTime" label="合作时间：" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                    <a-range-picker :disabledDate="disabledDate" v-model="cooperationSetModalForm.selectDate" />
                    <!-- [] -->
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24" style="margin-top:8px;">
                  <a-form-model-item label="合同" prop="contractUrl" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                    <upload :limit="9" v-model="cooperationSetModalForm.contractUrl"></upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row style="position: relative;top: -10px;">
                <a-col :span="24">
                  <a-form-model-item label="备注" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                    <a-input v-model="cooperationSetModalForm.remark" type="textarea"></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="上传截图：" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                    <upload :limit="9" v-model="cooperationSetModalForm.contractImageUrl"></upload>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </div>
        <div class="apply-info" v-if="getCooperationInfo && getCooperationInfo.length > 0">
          <Title :conf="{ title: '合作记录', src: require('@/assets/images/icon_hzsz_hzjl@3x.png') }" class="margin-bott-10" :fontSize="16" :imgWidth="22" :imgHieght="22" />
          <div class="apply-info-box cooper-box" v-for="item in getCooperationInfo" :key="item.id">
            <a-descriptions>
              <a-descriptions-item label="结算类型">{{ item.settlementTypeContent || '无' }}</a-descriptions-item>
              <a-descriptions-item v-if="item.money && item.settlementTypeContent !== 'D'" :label="item.settlementType === 'A' || item.settlementType === 'B' ? '坑位费' : '车马费'">{{
                (item.money / 100).toFixed(2) || '0'
              }}</a-descriptions-item
              ><br />
              <a-descriptions-item label="合作时间" :span="3">{{ item.cooperateStartTime || '无' }} 至 {{ item.cooperateEndTime || '无' }}</a-descriptions-item>
              <a-descriptions-item label="备注" :span="6">{{ item.remark || '无' }}</a-descriptions-item>
            </a-descriptions>
            <a-descriptions class="desc-box">
              <a-descriptions-item label="合同" :span="3">
                <upload v-show="item.urlList" disabled style="margin-bottom:-15px;" :limit="1" :value="item.urlList || []"></upload>
                <span v-show="!item.urlList">无</span>
              </a-descriptions-item>
              <a-descriptions-item label="截图" :span="3">
                <upload v-show="item.remarkList" disabled :limit="1" :value="item.remarkList || []"></upload>
                <span v-show="!item.remarkList">无</span>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
        <div style="display:flex;justify-content: center;">
          <a-button type="" @click="submitCoop(0)" style="margin-right:20px;">保存草稿</a-button>
          <a-button type="primary" @click="submitCoop(1)" style="background:#1D6FE9">提交审核</a-button>
        </div>
      </a-spin>
    </a-modal>
    <!-- 查看详情弹窗 -->
    <a-modal class="anchor-info" title="详情'" :visible.sync="isDetailShow" :maskClosable="false" @cancel="isDetailShow = false">
      <a-descriptions>
        <a-descriptions-item label="申请时间" :span="3">{{ detailData.applyTime || '无' }}</a-descriptions-item>
        <a-descriptions-item label="申请人类型" :span="3">{{ detailData.applyTypeDesc || '无' }}</a-descriptions-item>
        <a-descriptions-item label="申请人姓名" :span="3">{{ detailData.name || '无' }}</a-descriptions-item>
        <a-descriptions-item label="申请人手机号" :span="3">{{ detailData.phoneNumber || '无' }}</a-descriptions-item>
        <a-descriptions-item label="申请人身份证号" :span="3">{{ detailData.idCard || '无' }}</a-descriptions-item>
        <!-- <a-descriptions-item label="当前在播平台" :span="3">{{ anchorDesc.platform | getPlatform }}</a-descriptions-item> -->
        <a-descriptions-item label="当前在播平台" :span="3">{{ detailData.platform || '无' }}</a-descriptions-item>
        <a-descriptions-item label="身份证照片" :span="3">
          <upload v-show="detailData.idCardFrontUrl || detailData.idCardBackUrl" disabled :limit="2" :value="[detailData.idCardFrontUrl, detailData.idCardBackUrl]"></upload>
          <span v-show="!detailData.idCardBackUrl && !detailData.idCardFrontUrl">无</span>
        </a-descriptions-item>
      </a-descriptions>
      <!-- 操作 -->
      <template #footer>
        <a-button type="primary" style="background:#1D6FE9" @click="isDetailShow = false">关闭</a-button>
      </template>
    </a-modal>
  </a-spin>
</template>

<script>
import { locationList, cooperateDetail, agentSellerBindList, cooperateSet, cooperateInfoList, agentSellerSearch, bindAgentData, platformList } from '@/service'
import upload from '@/components/upload/upload'
import moment from 'moment'
import Title from '../anchorManagDesc/components/Title'
const hostForm = function(row = {}) {
  return {
    id: row.id || '',
    // accountName: row.accountName || '',
    // cardNumber: row.cardNumber || '',
    dyUid: row.dyUid || '',
    idCard: row.idCard || '',
    remark: row.remark || '',
    name: row.name || '',
    phoneNumber: row.phoneNumber || '',
    picUrl: row.picUrl || [],
    platform: row.platform || undefined,
    dyNo: row.dyNo || ''
  }
}
const hostFormGet = function(row = {}) {
  return {
    id: row.id || '',
    // accountName: row.accountName || '',
    // cardNumber: row.cardNumber || '',
    dyUid: row.dyUid || '',
    idCard: row.idCard || '',
    remark: row.remark || '',
    idCardBackUrl: row.idCardBackUrl ? [row.idCardBackUrl] : [],
    idCardFrontUrl: row.idCardFrontUrl ? [row.idCardFrontUrl] : [],
    name: row.name || '',
    phoneNumber: row.phoneNumber || '',
    picUrl: row.picUrl ? [row.picUrl] : [],
    platform: row.platform || undefined,
    dyNo: row.dyNo || ''
  }
}
const g = function(row = {}) {
  return {
    selectDate: row.selectDate || [],
    contractUrl: row.contractUrl || [],
    money: row.money ? (row.money / 100).toFixed(2) : '',
    contractImageUrl: row.contractImageUrl || [],
    remark: row.remark || '',
    accountType: row.accountType || '',
    agentId: row.agentId || '',
    id: row.id || '',
    settlementType: row.settlementType ? String(row.settlementType) : undefined
  }
}
export default {
  name: 'salesBinding',
  data() {
    let checkDate = (rule, value, callback) => {
      const { selectDate = [] } = this.cooperationSetModalForm || {}
      if (selectDate && selectDate.length > 0) {
        callback()
      } else {
        callback(new Error('请选择合作时间'))
      }
    }
    let checkMoney = (rule, value, callback) => {
      var pattern = /^\d+(\.\d+)?$/
      if (!value) {
        callback(new Error('请输入金额'))
      } else if (!pattern.test(value) && value) {
        callback(new Error('金额格式有误'))
      } else {
        callback()
      }
      // callback()
    }
    let checkphone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入抖音注册手机号'))
      }
      setTimeout(() => {
        var pattern = /^1[3456789]\d{9}$/
        if (!pattern.test(value)) {
          callback(new Error('手机号码格式有误'))
        } else {
          callback()
        }
      }, 500)
    }
    let checkIdcard = (rule, value, callback) => {
      var pattern = /(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,26}/
      if (!pattern.test(value) && value) {
        callback(new Error('身份证格式有误'))
      } else {
        callback()
      }
    }
    return {
      moment,
      // 详情
      detailData: {},
      // loading是否显示
      isLoading: false,
      // 详情
      isDetailShow: false,
      // 绑定主播loading
      isBindHostLoading: false,
      // 新增绑定主播显隐
      addBindingShow: false,
      // 新增绑定主播表单
      // 坑位费等
      showMoneyCoop: false,
      moneyLabelCoop: '金额',
      // 提交合作设置loading
      isSubCoopLoading: false,
      // 打款申请loading
      addBindingModalForm: hostForm(),
      getAgentInfo: hostFormGet(),
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // 平台列表
      platformList: [],
      addHostRules: {
        name: [
          { required: true, message: '请输入主播平台昵称，如：在抖音平台的账号昵称', trigger: 'blur' },
          { min: 0, max: 20, message: '最长不超过20字', trigger: 'blur' }
        ],
        dyNo: [
          { required: true, message: '请输入抖音号', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_.]*$/,
            message: '抖音号格式有误',
            trigger: 'blur'
          }
        ],
        phoneNumber: [{ validator: checkphone, required: true, trigger: 'blur' }],
        // accountName: [
        //   { message: '请输入银行卡号开户人姓名', required: true, trigger: 'blur' },
        //   { min: 0, max: 20, message: '最长不超过20字', trigger: 'blur' }
        // ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_]*$/,
            message: '身份证格式有误',
            trigger: 'blur'
          },
          { min: 0, max: 18, message: '超出身份证号长度', trigger: 'blur' }
        ],
        platform: [{ required: true, message: '请选择当前在播平台，如：抖音', trigger: 'change' }],
        dyUid: [
          { required: true, message: '请输入主播在抖音平台的UID', trigger: 'blur' },
          {
            pattern: /^[0-9]*$/,
            message: 'UID格式有误',
            trigger: 'blur'
          }
        ],
        remark: [
          { required: false, message: '请输入备注', trigger: 'blur' },
          { min: 0, max: 50, message: '最长不超过50字', trigger: 'blur' }
        ]
        // idCardFrontUrl: [{ required: true, message: '请上传主播身份证', trigger: 'blur' }]
        // cardNumber: [
        //   { required: true, message: '请输入主播银行卡号', trigger: 'blur' },
        //   {
        //     pattern: /^[0-9]*$/,
        //     message: '账户卡号格式有误',
        //     trigger: 'blur'
        //   },
        //   { min: 0, max: 20, message: '超出卡号长度', trigger: 'blur' }
        // ]
      },
      // table数据查询条件
      search: {
        locationId: undefined,
        status,
        selectDate: [],
        agentInfo: ''
      },
      // 产品列表
      productList: [],
      // 主播列表总数据条数
      anchorTotal: 0,
      locationListData: [],
      // 合作设置
      cooperationSetModal: false,
      cooperationSetModalForm: g(),
      getCooperationInfo: [],
      coopRules: {
        settlementType: [
          {
            required: true,
            message: '请选择结算类型',
            trigger: 'blur'
          }
        ],
        cooperateStartTime: [{ validator: checkDate, trigger: 'blur', message: '请设置合同时间', required: true }],
        contractUrl: [{ required: true, message: '请上传合同', trigger: 'blur' }],
        money: [
          {
            validator: checkMoney,
            required: true,
            message: '请输入金额',
            trigger: 'blur'
          }
        ]
      }
    }
  },

  components: {
    upload,
    Title
  },

  computed: {
    // table配置
    tableColumns() {
      return [
        { title: '站点', width: 200, dataIndex: 'siteName' },
        { title: '主播名称', width: 200, dataIndex: 'agentName' },
        { title: '主播UID', width: 260, dataIndex: 'dyUid' },
        { title: '联系电话', width: 200, dataIndex: 'phoneNumber' },
        { title: '销售', width: 200, dataIndex: 'sellerName' },
        { title: '申请时间', width: 200, dataIndex: 'createTime' },
        { title: '状态', width: 120, dataIndex: 'status', scopedSlots: { customRender: 'status' } },
        // {
        //   title: '流水',
        //   width: 150,
        //   dataIndex: 'salePrice',
        //   customRender: (data) => {
        //     if (!data) return '￥0'
        //     return '￥' + safeDiv(data, 100)
        //   }
        // },
        // {
        //   title: '利润',
        //   width: 150,
        //   dataIndex: 'originPrice',
        //   customRender: (data) => {
        //     if (!data) return '￥0'
        //     return '￥' + safeDiv(data, 100)
        //   }
        // },
        // {
        //   title: '我的提成',
        //   width: 150,
        //   dataIndex: 'originPrice',
        //   customRender: (data) => {
        //     if (!data) return '￥0'
        //     return '￥' + safeDiv(data, 100)
        //   }
        // },
        { title: '操作', width: 120, fixed: 'right', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
      ]
    }
  },

  methods: {
    disabledDate(current) {
      return current < moment().subtract(1, 'day') // 今天之后的年月日不可选，不包括今天
    },
    // 站点列表
    async getLocationList() {
      await locationList({ city: '' }).then((res = []) => {
        this.locationListData = res
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    /**
     * 通过条件查询
     * @returns {void}
     */
    handleByQueryCond() {
      this.pagination.pageIndex = 1
      this.query()
    },

    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num) {
      this.pagination.pageIndex = num
      this.query()
    },

    // 拿参数
    getParams() {
      const { pageIndex, pageSize } = this.pagination
      const { selectDate, agentInfo, status } = this.search

      return {
        pageIndex,
        pageSize,
        status,
        agentInfo,
        startTime: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
        endTime: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
      }
    },
    // 设置搜索
    setSearch() {
      const { pageIndex, startTime, endTime, status, agentInfo } = this.$route.query
      const queryLen = Object.keys(this.$route.query).length
      if (queryLen) {
        this.search = {
          ...this.search,
          pageIndex: pageIndex ? Number(pageIndex) : 1,
          status: status || '',
          agentInfo: agentInfo || '',
          selectDate: startTime && endTime ? [moment(Number(startTime)), moment(Number(endTime))] : []
          //  selectDate: beginTime ? Number(beginTime) : null,
          //  endTime: endTime ? Number(endTime) : null,
        }
      }
    },
    // 初始化
    initQuery() {
      this.pagination.pageIndex = 1
      this.pagination.pageSize = 10
      this.setPath(this.getParams())
      this.query()
    },

    /**
     * 获取产品列表
     * @returns {Promise<void>}
     */
    query() {
      this.isLoading = true
      agentSellerBindList(this.getParams())
        .then((rs) => {
          this.productList = Object.freeze(rs.agentSellerBindListData) || []
          this.pagination.total = rs.total || 0
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 储存搜索字段
    setPath(origin) {
      const { path } = this.$route
      const query = {}
      for (let key in origin) {
        if (origin[key]) query[key] = origin[key]
      }
      if (query.pageIndex <= 1) delete query.pageIndex
      delete query.pageSize
      this.$router
        .replace({
          path,
          query: {
            ...query
          }
        })
        .catch(() => {})
    },
    // 新增绑定
    addBinding() {
      this.getPlatformList().then(() => {
        this.addBindingShow = true
      })
    },
    cancelSubmitAddHost() {
      this.addBindingShow = false
      this.addBindingModalForm = hostForm({})
      this.getAgentInfo = hostFormGet({})
      let form = this.$refs.addBindingModalForm
      if (form && form.clearValidate) {
        this.$nextTick(() => {
          form.clearValidate()
        })
      }
    },
    submitAddHost() {
      this.$refs.addBindingModalForm.validate((valid, obj = {}) => {
        if (valid) {
          const postQuery = { ...this.addBindingModalForm }
          // if (idCardBackUrl.length === 0) {
          //   this.$messageSend.error('请上传身份证反面！')
          //   return
          // }
          this.isBindHostLoading = true
          bindAgentData(postQuery)
            .then((res) => {
              this.query()
              this.addBindingShow = false
              this.addBindingModalForm = hostForm({})
            })
            .finally(() => {
              this.isBindHostLoading = false
            })
            .catch(() => {
              this.isBindHostLoading = false
            })
        }
      })
    },
    toViedoList(id = '') {
      this.$router.push({
        path: '/vedioList',
        query: {
          id
        }
      })
    },
    // 获取详情数据
    getBindDetail(id = '') {
      this.isLoading = true
      return getAnchorReviewDescApi({ id })
        .then((rs = {}) => {
          this.detailData = Object.freeze(rs)
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 详情
    detailInfo(id = '') {
      this.getBindDetail(id).then((res = {}) => {
        this.detailData = res
        this.isDetailShow = true
      })
    },
    // 获取平台
    getPlatformList() {
      return new Promise((resolve) => {
        platformList()
          .then((res = []) => {
            this.platformList = res
            resolve(res)
          })
          .catch((error) => {
            console.log(error)
          })
      })
    },
    getCoopDetail() {
      const { accountType, agentId } = this.cooperationSetModalForm || {}
      return new Promise((resolve) => {
        cooperateDetail({
          id: agentId,
          accountType
        })
          .then((res = {}) => {
            const { cooperateEndTime, cooperateStartTime, settlementType } = res
            this.cooperationSetModalForm = g(res)
            if (cooperateEndTime && cooperateStartTime) {
              this.cooperationSetModalForm.selectDate = [cooperateStartTime, cooperateEndTime]
            }
            this.cooperationSetModalForm.agentId = agentId
            this.cooperationSetModalForm.accountType = accountType
            if (settlementType !== 4) {
              this.showMoneyCoop = true
            } else {
              this.showMoneyCoop = false
            }
            resolve(res)
          })
          .catch((error) => {
            console.log(error)
          })
      })
    },
    // 获取合作设置详情
    getCoopDetailInfo() {
      const { accountType, agentId } = this.cooperationSetModalForm || {}
      return new Promise((resolve) => {
        cooperateInfoList({
          id: agentId,
          accountType
        })
          .then((res = {}) => {
            console.log(res)
            this.getCooperationInfo = res || []
            resolve(res)
          })
          .catch((error) => {
            console.log(error)
          })
      })
    },
    changeCashTypeCoop(e) {
      if (e === '1' || e === '2') {
        this.showMoneyCoop = true
        this.moneyLabelCoop = '坑位费'
      } else if (e === '3') {
        this.showMoneyCoop = true
        this.moneyLabelCoop = '车马费'
      } else {
        this.showMoneyCoop = false
      }
    },
    // 合作设置
    cooperationSetFn(item = {}) {
      const { agentType, agentId } = item
      this.cooperationSetModalForm.accountType = agentType
      this.cooperationSetModalForm.agentId = agentId
      const { getCoopDetail, getCoopDetailInfo } = this
      Promise.all([getCoopDetail(), getCoopDetailInfo()]).then((res) => {
        console.log(res)
        this.cooperationSetModal = true
      })
    },
    // 提交合作设置 status 0 草稿 1 提交审核
    submitCoop(status = 0) {
      this.$refs.cooperationSetModalForm.validate((valid, obj = {}) => {
        let isValid = false
        if (status === 0) {
          isValid = true
          this.$refs.cooperationSetModalForm.clearValidate()
        } else {
          isValid = valid
        }
        if (this.cooperationSetModalForm.settlementType === '4') {
          this.$refs.cooperationSetModalForm.clearValidate(['money'])
          this.cooperationSetModalForm.money = ''
          if (obj && obj.money) {
            isValid = true
          }
        }
        if (isValid) {
          const { agentId, id, accountType, contractUrl, remark, selectDate = [], settlementType, contractImageUrl, money } = this.cooperationSetModalForm || {}
          const postParams = {
            id,
            agentId,
            accountType,
            contractUrl,
            settlementType,
            contractImageUrl,
            status,
            money: money ? money * 100 : '',
            remark,
            cooperateStartTime: selectDate[0] ? moment(selectDate[0]).format('YYYY-MM-DD 00:00:00') : undefined,
            cooperateEndTime: selectDate[1] ? moment(selectDate[1]).format('YYYY-MM-DD 23:59:59') : undefined
          }
          this.isSubCoopLoading = true
          cooperateSet(postParams)
            .then((res) => {
              this.query()
              this.cooperationSetModal = false
              this.cooperationSetModalForm = g({})
            })
            .finally(() => {
              this.isSubCoopLoading = false
            })
            .catch(() => {
              this.isSubCoopLoading = false
            })
        }
      })
    },
    onSearchAgent(value = '') {
      agentSellerSearch({ phoneNumber: value }).then((res = {}) => {
        if (res === null) {
          this.$messageSend.error('主播信息系统不存在，请填写后提交')
          res = {}
        }
        this.addBindingModalForm = hostForm(res)
        this.getAgentInfo = hostFormGet(res)
        this.addBindingModalForm.phoneNumber = value
      })
    }
  },

  mounted() {
    this.getLocationList()
    this.setSearch()
    this.query()
  },

  filters: {
    // 处理分-元
    fenToYuan(val) {
      if (!val) return 0
      return (val / 100).toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-upload-list-picture-card .ant-upload-list-item-info:before {
  right: 0;
}
p {
  margin: 0;
}
.poi-list {
  padding: 16px;
  height: 100%;
}
.margin-bott-10 {
  margin-bottom: 10px;
}
.id-card-box {
  display: flex;
  &-item {
    text-align: center;
    p {
      margin-right: 8px;
      margin-top: -20px;
    }
  }
}
.color-f55 {
  color: #f55f4e !important;
}
.apply-info {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 16px 12px;
  margin-top: -15px;
  margin-bottom: 15px;
  &-box {
    margin-left: 22px;
  }
  .color-red {
    color: #f55f4e;
  }
}
.cooper-box {
  background: #fff;
  border-radius: 4px;
  margin-left: 0;
  padding: 16px 30px 0 30px;
  margin-bottom: 10px;
  // /deep/ .ant-descriptions-item > span {
  //   min-width: 70px;
  // }
  .desc-box {
    /deep/ .ant-descriptions-item {
      display: flex;
    }
  }
  // /deep/ .ant-descriptions-item {
  //   width: 100%;
  // }
}
</style>
